<template>
  <div class="container">
    <div class="is-size-4 ml-3 mb-4 mt-2 has-text-weight-bold">
      发布考试 / 练习
      <div class="primary-color is-size-4">——</div>
    </div>

    <el-form ref="form" style="width:90%" :model="form" label-width="100px">
      <el-form-item label="类型">
        <el-radio-group v-model="form.examType">
          <el-radio :label="1">考试</el-radio>
          <el-radio :label="2">练习</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="标题">
        <el-input v-model="form.title" style="width:700px" />
      </el-form-item>

      <el-form-item v-if="form.examType === 1" label="开始时间">
        <span class="mr-4">从</span>
        <el-date-picker
          v-model="earlyStartTime"
          type="datetime"
          placeholder="选择日期时间"
        />
        <span class="mx-4">到</span>
        <el-date-picker
          v-model="lateStartTime"
          type="datetime"
          placeholder="选择日期时间"
        />
        <el-tooltip
          content="允许进入考试的时间区间，早于或晚于此区间将无法进入考试。"
        >
          <i class="el-icon-question is-size-6 has-text-grey mx-4" />
        </el-tooltip>
      </el-form-item>

      <el-form-item v-if="form.examType === 1" label="交卷时间">
        <el-date-picker
          v-model="endTime"
          type="datetime"
          placeholder="选择日期时间"
        />
      </el-form-item>

      <el-form-item label="试卷">
        <el-button size="small" @click="choosePaper">选择...</el-button>
        <i v-if="form.paperId" class="el-icon-success has-text-success m-4" />
        <span>{{ selectedPaperTitle }}</span>
      </el-form-item>
      <el-form-item label="面向班级">
        <el-button size="small" @click="chooseClazz">选择...</el-button>
        <i
          v-if="form.clazzIdList.length !== 0"
          class="el-icon-success has-text-success m-4"
        />
        <span v-if="form.clazzIdList.length !== 0">{{
          selectedClazz.toString()
        }}</span>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">发布</el-button>
      </el-form-item>
    </el-form>

    <!-- 选择试卷弹窗 -->
    <el-dialog width="80%" title="选择试卷" :visible.sync="paperTableVisible">
      <el-table
        highlight-current-row
        class="ml-4"
        style="width:97%"
        stripe
        :data="paperListData"
        @current-change="handlePaperChange"
      >
        <el-table-column prop="name" label="试卷名称" width="380" />
        <el-table-column prop="score" label="满分" width="80" />
        <el-table-column prop="gradeLevel" label="年级" width="80" />
        <el-table-column prop="suggestTime" label="时间要求(分钟)" />
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="paperTableVisible = false"
        >确定</el-button>
      </div>
    </el-dialog>

    <!-- 选择班级弹窗 -->
    <el-dialog width="70%" title="选择班级" :visible.sync="clazzTableVisible">
      <el-table
        highlight-current-row
        class="ml-4"
        stripe
        :data="clazzListData"
        @selection-change="handleClazzSelection"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="班级" width="280" />
        <el-table-column prop="grade_level" label="年级" width="80" />
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="clazzTableVisible = false"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const paperApi = require('@/api/paper')
const clazzApi = require('@/api/clazz')
const examApi = require('@/api/exam')
import dayjs from 'dayjs'
export default {
  data() {
    return {
      paperTableVisible: false,
      paperListData: [],
      clazzTableVisible: false,
      clazzListData: [],
      selectedPaperTitle: '',
      selectedClazz: [],
      earlyStartTime: '',
      lateStartTime: '',
      endTime: '',
      form: {
        clazzIdList: '',
        earlyStartTime: '',
        lateStartTime: '',
        endTime: '',
        examType: 1,
        paperId: 0,
        title: 'XXXX学科XXX学年考试'
      }
    }
  },
  computed: {},
  methods: {
    choosePaper() {
      this.paperTableVisible = true
      this.getAllPaperList()
    },

    getAllPaperList() {
      console.log('getPaperListBySubject')
      paperApi.getAllPaperList().then(res => {
        this.paperListData = res.data.data
        console.log(res.data)
      })
    },

    handlePaperChange(curRow) {
      this.form.paperId = curRow.id
      this.selectedPaperTitle = curRow.name
      console.log(this.form)
    },

    handleClazzSelection(selArr) {
      this.form.clazzIdList = ''
      this.selectedClazz = []
      selArr.forEach(element => {
        this.form.clazzIdList = this.form.clazzIdList + element.id + ','
        this.selectedClazz.push(element.name)
      })
      console.log(this.form.clazzIdList)
      console.log(this.form)
    },

    chooseClazz() {
      clazzApi.getClazzList().then(res => {
        this.clazzTableVisible = true
        this.clazzListData = res.data
        console.log(res.data)
      })
    },

    onSubmit() {
      const loading = this.$loading()
      console.log(JSON.stringify(this.form))
      this.form.earlyStartTime = dayjs(this.earlyStartTime).valueOf()
      this.form.lateStartTime = dayjs(this.lateStartTime).valueOf()
      this.form.endTime = dayjs(this.endTime).valueOf()

      examApi
        .addExam(this.form)
        .then(res => {
          loading.close()
          this.$confirm('发布成功，跳转到列表查看', '', {
            confirmButtonText: '去看看',
            type: 'success'
          })
            .then(() => {
              this.$router.push('/exams/list')
            })
            .catch(() => {
              this.form = {
                clazzIdList: '',
                earlyStartTime: '',
                lateStartTime: '',
                endTime: '',
                examType: 1,
                paperId: 0,
                title: ''
              }
            })
        })
        .catch(() => loading.close())
    }
  }
}
</script>

<style lang="scss">
.container {
  margin-bottom: 100px;
}

.btn {
  font-size: 17px;
  margin-bottom: 15px;
  width: 100%;
  height: 65px;
  text-align: left;
}
</style>
